"use client"

import { useState, useRef } from "react"
import { View, Text, StyleSheet, TouchableOpacity, Animated, Platform } from "react-native"
import { SafeAreaView } from "react-native-safe-area-context"
import { LinearGradient } from "expo-linear-gradient"
import { ArrowLeft, List, Lightbulb } from "lucide-react-native"
import { useRouter } from "expo-router"
import { theme } from "../../constants/theme"
import { WordListModal, type WordListItem } from "../../components/practices/WordListModal"
import { ProgressBar } from "../../components/practices/ProgressBar"
import { LetterSpellCard } from "../../components/practices/LetterSpellCard"

// 模拟的练习数据
const PRACTICE_DATA = [
    {
        id: "1",
        word: "student",
        phonetic: "/ˈstjuː.dənt/",
        meaning: "n. 学生",
        audioUrl: "https://example.com/audio/student.mp3",
    },
    {
        id: "2",
        word: "teacher",
        phonetic: "/ˈtiː.tʃər/",
        meaning: "n. 教师",
        audioUrl: "https://example.com/audio/teacher.mp3",
    },
    {
        id: "3",
        word: "school",
        phonetic: "/skuːl/",
        meaning: "n. 学校",
        audioUrl: "https://example.com/audio/school.mp3",
    },
    // 更多单词...
]

export default function LetterSpellScreen() {
    const router = useRouter()
    const [currentWordIndex, setCurrentWordIndex] = useState(0)
    const [listModalVisible, setListModalVisible] = useState(false)
    const [showHint, setShowHint] = useState(false)

    // 添加动画值
    const cardOpacity = useRef(new Animated.Value(1)).current

    // 当前单词
    const currentWord = PRACTICE_DATA[currentWordIndex]

    // 返回上一页
    const handleBack = () => {
        router.back()
    }

    // 显示提示
    const showHintWord = () => {
        setShowHint(true)

        // 2秒后隐藏提示
        setTimeout(() => {
            setShowHint(false)
        }, 2000)
    }

    // 下一个单词
    const handleNext = () => {
        if (currentWordIndex < PRACTICE_DATA.length - 1) {
            // 添加滑动淡出动画
            Animated.sequence([
                Animated.timing(cardOpacity, {
                    toValue: 0,
                    duration: 250,
                    useNativeDriver: true,
                }),
            ]).start(() => {
                setCurrentWordIndex(currentWordIndex + 1)
                // 添加滑动淡入动画
                Animated.timing(cardOpacity, {
                    toValue: 1,
                    duration: 250,
                    useNativeDriver: true,
                }).start()
            })
        }
    }

    // 准备单词列表数据
    const wordListData: WordListItem[] = PRACTICE_DATA.map((item) => ({
        id: item.id,
        word: item.word,
        phonetic: item.phonetic,
        meaning: item.meaning,
    }))

    return (
        <View style={styles.container}>
            <LinearGradient
                colors={theme.colors.neutral.backgroundGradient}
                start={{ x: 0, y: 0 }}
                end={{ x: 0, y: 1 }}
                style={styles.gradientBackground}
            >
                <SafeAreaView style={styles.safeArea} edges={["top"]}>
                    {/* 头部 */}
                    <View style={styles.header}>
                        <TouchableOpacity onPress={handleBack} style={styles.headerButton}>
                            <ArrowLeft size={24} color={theme.colors.neutral.black} />
                        </TouchableOpacity>
                        <Text style={styles.headerTitle}>字母拼写</Text>
                        <TouchableOpacity style={styles.headerButton} onPress={() => setListModalVisible(true)}>
                            <List size={24} color={theme.colors.neutral.black} />
                        </TouchableOpacity>
                    </View>

                    {/* 进度条 */}
                    <ProgressBar current={currentWordIndex + 1} total={PRACTICE_DATA.length} showText={true} textPosition="top" />

                    {/* 主要内容区域 */}
                    <View style={styles.contentWrapper}>
                        <Animated.View style={[styles.content, { opacity: cardOpacity }]}>
                            <View style={styles.card}>
                                <LetterSpellCard
                                    word={currentWord.word}
                                    phonetic={currentWord.phonetic}
                                    meaning={currentWord.meaning}
                                    showHint={showHint}
                                    onPlaySound={() => console.log("播放音频")}
                                    onCheckAnswer={(isCorrect) => console.log("答案检查:", isCorrect)}
                                    onNext={handleNext}
                                />
                            </View>
                        </Animated.View>
                    </View>
                </SafeAreaView>

                {/* 底部状态栏 */}
                <View style={styles.bottomBar}>
                    <TouchableOpacity style={styles.hintButton} onPress={showHintWord} disabled={showHint}>
                        <Lightbulb size={24} color={theme.colors.primary.default} fill={theme.colors.primary.light} />
                    </TouchableOpacity>

                    <TouchableOpacity style={styles.nextButton} onPress={handleNext}>
                        <LinearGradient
                            colors={theme.colors.primary.gradient}
                            start={{ x: 0, y: 0 }}
                            end={{ x: 1, y: 0 }}
                            style={styles.nextButtonGradient}
                        >
                            <Text style={styles.nextButtonText}>下一词</Text>
                        </LinearGradient>
                    </TouchableOpacity>
                </View>

                {/* 单词列表弹窗 */}
                <WordListModal
                    visible={listModalVisible}
                    data={wordListData}
                    currentIndex={currentWordIndex}
                    onClose={() => setListModalVisible(false)}
                    onSelectWord={(index) => {
                        // 添加动画效果
                        Animated.timing(cardOpacity, {
                            toValue: 0,
                            duration: 250,
                            useNativeDriver: true,
                        }).start(() => {
                            setCurrentWordIndex(index)
                            setListModalVisible(false)
                            // 添加滑动淡入动画
                            Animated.timing(cardOpacity, {
                                toValue: 1,
                                duration: 250,
                                useNativeDriver: true,
                            }).start()
                        })
                    }}
                    title="单词列表"
                />
            </LinearGradient>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.colors.neutral.background,
    },
    gradientBackground: {
        flex: 1,
    },
    safeArea: {
        flex: 1,
    },
    header: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.md,
    },
    headerButton: {
        width: 40,
        height: 40,
        borderRadius: 20,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "rgba(255, 255, 255, 0.5)",
    },
    headerTitle: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        textAlign: "center",
    },
    contentWrapper: {
        flex: 1,
        paddingBottom: Platform.OS === "ios" ? 90 : 70, // 增加底部边距，避免内容被底部栏遮挡
    },
    content: {
        flex: 1,
        paddingHorizontal: theme.spacing.lg,
        paddingTop: theme.spacing.lg,
    },
    card: {
        flex: 1,
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.extraLarge, // 增加圆角
        padding: theme.spacing.xl,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 4 },
                shadowOpacity: 0.3,
                shadowRadius: 8,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    bottomBar: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingHorizontal: theme.spacing.lg,
        paddingTop: theme.spacing.lg,
        paddingBottom: Platform.OS === "ios" ? 34 : theme.spacing.lg,
        backgroundColor: theme.colors.neutral.white,
        borderTopWidth: 1,
        borderTopColor: "rgba(0, 0, 0, 0.05)",
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.05)",
                shadowOffset: { width: 0, height: -2 },
                shadowOpacity: 1,
                shadowRadius: 4,
            },
            android: {
                elevation: 8,
            },
        }),
    },
    hintButton: {
        width: 44,
        height: 44,
        borderRadius: 22,
        backgroundColor: "rgba(91, 142, 244, 0.1)",
        alignItems: "center",
        justifyContent: "center",
    },
    nextButton: {
        flex: 1,
        marginLeft: theme.spacing.lg,
        borderRadius: theme.borderRadius.large,
        overflow: "hidden",
        height: 44, // 固定高度
    },
    nextButtonGradient: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
    },
    nextButtonText: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.white,
    },
})

